<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人作业</title>
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.css">
</head>
<body>
  <div id="fullpage">
    <div class="section page-1">
        <div class="video-background">
            <!-- 背景视频 -->
            <video id="video1" src="https://webstatic.mihoyo.com/upload/op-public/2021/08/12/c7f405d6cbb03e5c668a12d3e0de290a_2683598109381103734.mp4" poster="https://webstatic.mihoyo.com/upload/op-public/2021/08/12/7a388979f57b0943e38a4fd33ea6d593_3621961254475262927.png" autoplay="autoplay" autobuffer="" x5-video-player-type="h5" x-webkit-airplay="" playsinline="" webkit-playsinline="" loop="loop" muted="muted"></video>
        </div>
        <img src="https://www.mihoyo.com/_nuxt/img/slogan@2x.301d3f9.png" alt="" class="logo">
      <div class="index-img">
        <img src="" alt="鼠标">
        <img src="" alt="箭头" class="jt">
      </div>
      <!-- 黑色背景 -->
      <div class="index-bg"></div>
    </div>

    <div class="section page-2">
      <div class="navbar">
        <a href="#page1">首页</a>
        <a href="#page2">产品信息</a>
        <a href="#page3">了解我们</a>
        <a href="#page4">新闻动态</a>
        <a href="#page5">原神抽卡</a>
      </div>

      

      <div class="warrt">
        <div class="bnnet">
            <img src="./img/侧边背景.png" alt="" class="ce-img">
            <div class="image-container">
                <img class="move-image move-image1" src="https://www.mihoyo.com/_nuxt/img/char1.fd8e575.png" alt="图片 1">
                <img class="move-image move-image2" src="https://www.mihoyo.com/_nuxt/img/char2.a865d48.png" alt="图片 2">
                <img class="move-image move-image3" src="https://www.mihoyo.com/_nuxt/img/char3.629df8e.png" alt="图片 3">
              </div>
        </div>
        <div class="container-page2">
          <div class="box-page2">
            <div>技术宅拯救世界</div>
          </div>
          <div class="box-page2">
              <div>为世界所有美好而站</div>
          </div>
          <div class="box-page2">
              <div>原神启动</div>
          </div>
          <div class="box-page2">
              <div>薪火永燃</div>
          </div>
      </div>
    </div>
 
    

    </div>

    <div class="section page-3">
      <div class="navbar">
        <a href="#page1">首页</a>
        <a href="#page2">产品信息</a>
        <a href="#page3">了解我们</a>
        <a href="#page4">新闻动态</a>
        <a href="#page5">原神抽卡</a>
      </div>

    
      <div class="container-page3">
        <div class="scene active1" id="scene1"><img src="https://fastcdn.mihoyo.com/content-v2/plat/100577/82848bd2282a1cf7c3b3b68f36f1dbf9_196881664372621863.png" alt="场景1" class="qh-bj"></div>
        <div class="scene" id="scene2"><img src="https://webstatic.mihoyo.com/upload/op-public/2021/10/03/663fe95dff54044d7cd5d3a355f61bf7_6089937633900261947.png" alt="场景2" class="qh-bj"></div>
        <div class="scene" id="scene3"><img src="https://webstatic.mihoyo.com/upload/op-public/2021/10/03/58574b8c47e058787cc24049413b7cea_7872872512863208275.png" alt="场景3" class="qh-bj"></div>
        <div class="scene" id="scene4"><img src="https://webstatic.mihoyo.com/upload/op-public/2021/10/09/6c0e9aaa5b9471e32316d11284edb710_2698450106633206665.png" class="qh-bj"></div>
        <div class="scene" id="scene5"><img src="./img/jxin.webp" class="qh-bj"></div>
        <div class="scene" id="scene6"><img src="./img/gbc/gbc.webp" class="qh-bj"></div>
        <div class="scene" id="scene7"><img src="./img/you.webp" class="qh-bj"></div>
    </div>

    <div class="home-product-nav">
        <nav class="home-product-nav__item" onclick="page3_showScene(1),showScene_3(1)"><img src="https://webstatic.mihoyo.com/upload/op-public/2021/10/11/320a35c423a3d8ca043d7ee14a8c7925_602536019813937911.png" alt="miHoYo"></nav>
        <nav class="home-product-nav__item" onclick="page3_showScene(2),showScene_3(2)"><img src="https://webstatic.mihoyo.com/upload/op-public/2021/10/03/4080f2eb748823d8c38507c3d7b69b36_936817768851375073.png" alt="miHoYo"></nav>
        <nav class="home-product-nav__item" onclick="page3_showScene(3),showScene_3(3)"><img src="https://webstatic.mihoyo.com/upload/op-public/2021/10/09/def1f2abcfc2af0bbe2e5900a60a5ee1_5699547505742166353.png" alt="miHoYo"></nav>
        <nav class="home-product-nav__item" onclick="page3_showScene(4),showScene_3(4)"><img src="https://webstatic.mihoyo.com/upload/op-public/2021/10/09/870472d6104dbbe7ea18b27c13763ccb_5300916022261002498.png" alt="miHoYo"></nav>
        <nav class="home-product-nav__item" onclick="page3_showScene(5),showScene_3(5)"><img src="./img/鸣潮.jpeg" alt="miHoYo"></nav>
        <nav class="home-product-nav__item" onclick="page3_showScene(6),showScene_3(6)"><img src="./img/gbc/4866.webp" alt="miHoYo"></nav>
        <nav class="home-product-nav__item" onclick="page3_showScene(7),showScene_3(7)"><img src="./img/火影忍者.webp" alt="miHoYo"></nav>
    </div>
   
    <div class="display-text" id="sceneText">
    </div>
          
    </div>

    <div class="section page-4">
      <div class="navbar">
        <a href="#page1">首页</a>
        <a href="#page2">产品信息</a>
        <a href="#page3">了解我们</a>
        <a href="#page4">新闻动态</a>
        <a href="#page5">原神抽卡</a>
      </div>
      <img src="./img/侧边背景.png" alt="" class="ceb-img">
      <div id="dataContainerPage4">
        <a href="https://www.mihoyo.com/news/103570" class="news-list__item" style="background-image: url('./img/2.png');">
            <div class="news-list__item-banner">
                <img src="https://webstatic.mihoyo.com/upload/op-public/2022/12/16/76015e7f3ff02c6386699774360195fc_4380579706501373627.png?x-oss-process=image%2Fresize%2Cw_356%2Fquality%2CQ_90%2Fformat%2Cwebp" alt="miHoYo">
            </div>
            <div class="news-list__item-content">
                <div class="news-list__item-date">
                    <div>11<span class="slash">/</span>24</div>
                    <div class="year">2022</div>
                </div>
                <div class="news-list__item-title">
                    <div>“你们好，见字如面！”——阅见未名：图书捐赠公益活动</div>
                </div>
                <div class="news-list__item-desc">
                    2022年，米哈游《未定事件簿》携手韬奋基金会，联合开展了「阅见未名」图书捐赠公益活动。在《未定事件簿》各位玩家的热心支持下，目前已向云南省大理白族自治州11所小学、云南省普洱市澜沧拉祜族自治县36所小学共捐赠图书37000余册，并挂名“未名书屋”，丰富了当地学生的课后阅读资源。
                </div>
            </div>
        </a>
    </div>
    <button class="refresh-button">换一换</button>
    <a href="https://gitee.com/li0802/jianli" class="ck-img"></a>
    </div> 



    <div class="section page-5">
      <div class="navbar">
        <a href="#page1">首页</a>
        <a href="#page2">产品信息</a>
        <a href="#page3">了解我们</a>
        <a href="#page4">新闻动态</a>
        <a href="#page5">原神抽卡</a>
      </div>
      <img src="./img/侧边背景.png" alt="" class="ceb-img">
      <div class="card" id="card-img">
        <img src="./img/ckkk.png" alt="tp" id="displayed-img">
    </div>
    <div class="refresh-button-ck" onclick="changeImage()"></div>
    <a href="https://gitee.com/li0802/jianli" class="ck-img"></a>
    <footer>
      © 2024 codelover保留所有权利
    </footer>
    </div> 
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js"></script>

  <script src="./js/index.js">
  </script>
</body>
</html>
